
.prop-size-value {
    box-sizing: content-box; /* it's important to have content-box sizing, since we're setting explicit heights for the renderer element (and we don't want paddings to be included, since we're calculating elements heights based on contents) */
}

.prop-value, .prop-value.comp-shrink-horz {
    overflow-x: hidden;
}

.prop-value, .prop-value.comp-shrink-vert {
    overflow-y: hidden;
}

.prop-input {
    /*background-color:transparent;*/
    /*var(--component-background-color);*/
    /*color: var(--text-color);*/
}

.text-based-prop-value:not(.prop-input) {
    cursor: default; /* need this since text by default gets "editing" cursor, however it overrides for example resize cursor, but it's not clear what to do with it */
}
a.text-based-prop-value:not(.prop-input) { /* we have to set cursor pointer for a since we don't set href and thus UA doesn't set cursor pointer */
    cursor: pointer;
}

/* we set pre to preserve white spaces and line preaks in prop data*/
.text-based-prop-value {
    white-space: pre;
}
.text-based-prop-value.text-based-prop-wrap {
    white-space: pre-wrap;
}
/* when we have string and \n inside we still don't want it to wrap, so we have to set nowrap for that (we loose pre, but there is no pre-nowrap for now)*/
.text-based-prop-value.text-based-value-multi-line:not(.text-based-prop-wrap) {
    white-space: nowrap;
}

.text-based-value-empty {
    color: var(--null-value-string-color);
}

.prop-display-flex, .prop-display-flex.btn {
    display: flex;
}

/* 2 and 3 selectors are needed for action cell renderers, to respect that alignments */
.prop-flex-horz-start,
.prop-flex-horz-start.wrap-text-not-empty.wrap-img-horz,
.prop-flex-vert-start.wrap-text-not-empty.wrap-img-vert
{
    justify-content: flex-start;
}
.prop-flex-horz-center,
.prop-flex-horz-center.wrap-text-not-empty.wrap-img-horz,
.prop-flex-vert-center.wrap-text-not-empty.wrap-img-vert
{
    justify-content: center;
}
.prop-flex-horz-end,
.prop-flex-horz-end.wrap-text-not-empty.wrap-img-horz,
.prop-flex-vert-end.wrap-text-not-empty.wrap-img-vert
{
    justify-content: flex-end;
}
.prop-flex-vert-start,
.prop-flex-vert-start.wrap-text-not-empty.wrap-img-vert,
.prop-flex-horz-start.wrap-text-not-empty.wrap-img-horz
{
    align-items: flex-start;
}
.prop-flex-vert-center,
.prop-flex-vert-center.wrap-text-not-empty.wrap-img-vert,
.prop-flex-horz-center.wrap-text-not-empty.wrap-img-horz
{
    align-items: center;
}
.prop-flex-vert-end,
.prop-flex-vert-end.wrap-text-not-empty.wrap-img-vert,
.prop-flex-horz-end.wrap-text-not-empty.wrap-img-horz
{
    align-items: flex-end;
}
.prop-flex-vert-stretch {
    align-items: stretch;
}

.prop-text-horz-start {
    text-align: left;
}
.prop-text-horz-center {
    text-align: center;
}
.prop-text-horz-end {
    text-align: right;
}
.prop-text-vert-start {
    vertical-align: top;
}
.prop-text-vert-center {
    vertical-align: middle;
}
.prop-text-vert-baseline {
    vertical-align: baseline;
}
.prop-text-vert-end {
    vertical-align: bottom;
}